<?php

use yii\helpers\Html;
use backend\modules\statistics\assets\EchartsAsset;
EchartsAsset::register($this);
$this->title = '仔猪增长异常统计';
?>


<style>
    .table>tbody> tr >td{
        height: 70px;
        line-height: 70px;
    }
</style>




<section class="wrapper site-min-height">
    <!-- page start-->
    <section class="panel">
        <header class="panel-heading">
            <?= Html::a('返回','javascript:history.back(-1)'); ?>  <?= Html::encode($this->title) ?>
        </header>
<div class="row">
    <div class="col-md-10 col-md-offset-1" style="height: 100px;margin-top: 100px">
        <form class="form-inline" style="width: 100%" method="get">
            <div class="form-group" style="width: 60%">
                <input type="text" name="day" value="" class="form-control" placeholder="输入天数，表示将来多少天内有需要打疫苗的,默认是前后4天" style="width: 100%;">
            </div>
            <button class="btn btn-success btn-sm" type="submit"> 开始统计 </button>

        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-10 col-md-offset-1" style="margin-top: 70px">
        <!--work progress start-->
        <section class="panel">
            <div class="panel-body progress-panel" style="margin-top: -125px">
                <div class="task-progress">
                    <h1>防疫异常统计</h1>
                </div>
                <div class="task-option">
                </div>
            </div>
            <table class="table table-hover">
                <tbody>
                <tr>
                    <th>
                        批次
                    </th>
                    <th>
                        待防疫
                    </th>
                    <th>
                        已防疫
                    </th>
                    <th>
                        总数
                    </th>
                    <th>
                        统计图
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <?php foreach ($list as $key => $row) { ?>
                    <tr>
                        <td>
                            <?= $row['batch'] ?>
                        </td>
                        <td>
                            <?= $row['num'] ?>头
                        </td>
                        <td>
                            <?= $row['hasvacc'] ?>头
                        </td>
                        <td>
                            <?= $row['total'] ?>头
                        </td>
                        <td>
                            <div id="batch<?= $row['batch'] ?>" style="height: 70px;width: 70px;"></div>
                        </td>
                        <td>
                            <button class="btn btn-success btn-xs detail" data-batch="<?= $row['batch'] ?>"  data-toggle="modal" data-target="#detail-model">查看详情</button>
                        </td>
                    </tr>
                <?php } ?>
                </tbody>
            </table>
        </section>
        <!--work progress end-->
    </div>
</div>






<div id="detail-model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">巡检异常详情</h4>
            </div>
            <div class="modal-body" style="overflow: scroll;height: 700px;">
                正在加载。。。。。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

    </section>
</section>

<script>
    <?php $this->beginBlock('post') ?>
    $(function(){
        $('.detail').click(function(){
            var days = <?= $days ?>;
            var url = 'vaccinedetail';
            $.get(url,{batch:$(this).data('batch'),'days':days},function(res){
                console.log(res);
                $('#detail-model .modal-body').html(res);
                $('#detail-model').modal('show');
            })

        })

    })
    <?php $this->endBlock('post') ?>
    <?php $this->registerJs($this->blocks['post'],\yii\web\View::POS_END) ?>
</script>



<script>
    <?php $this->beginBlock('disease') ?>

    // 基于准备好的dom，初始化echarts实例
    <?php foreach ($list as $key => $row) {?>
    var option<?=$row['batch']?> = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:[]
        },
        series: [
            {
                name:'',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '12',
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:<?= json_encode($row['show']) ?>
            }
        ]
    };

    var myChart<?=$row['batch']?> = echarts.init(document.getElementById('batch<?=$row['batch']?>'));
    myChart<?=$row['batch']?>.setOption(option<?=$row['batch']?>);
    <?php } ?>

    <?php $this->endBlock('disease') ?>
    <?php $this->registerJs($this->blocks['disease'],\yii\web\View::POS_END) ?>
</script>
